<template>
  <div class="bar">
    <v-chart :option="getOptions()" autoresize></v-chart>
  </div>
</template>

<script lang="ts" setup>
const getOptions = () => {
  return {
    xAxis: {
      //均匀的分布
      type: "category",
      show: false,
    },
    yAxis: {
      show: false,
    },
    series: {
      type: "bar",
      data: props.data,
    },
    grid: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0,
    },
    //提示框组件
    tooltip: {
      //指示器
      axisPointer: {
        type: "cross",
      },
      //背景颜色
      backgroundColor: "rgba(0,0,0,0.3)",
      //文字的颜色
      textStyle: {
        color: "white",
      },
    },
  };
};

const props = defineProps(["data"]);
</script>

<style scoped>
.bar {
  width: 100%;
  height: 100%;
}
</style>
